import {Card} from "antd";
import { Button, Select, Form, Input,Radio,InputNumber } from 'antd';
import { useNavigate } from "react-router-dom";
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 8,
    },
  },
};
export default function userInfo() {
  const navigate = useNavigate()
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const back = () => {
    navigate(-1)
  }
  const prefixSelector = (
    <Form.Item name="prefix" noStyle>
      <Select
        style={{
          width: 70,
        }}
      >
        <Select.Option value="86">+86</Select.Option>
        <Select.Option value="87">+87</Select.Option>
      </Select>
    </Form.Item>
  );
  return (
  <Card title='输入用户表单'> 
    <Form
    {...formItemLayout}
    name="basic"
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    initialValues={{
      sex: 'male',
      prefix: "86",
    }}
  >
      <Form.Item
        label="用户名"
        name="username"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="性别"
        name="sex"
        rules={[{ required: true, message: '请输入用户名' }]}
      >
          <Radio.Group>
            <Radio value="male"> 男 </Radio>
            <Radio value="female"> 女 </Radio>
          </Radio.Group>
      </Form.Item>

      <Form.Item
          name="phone"
          label="手机号"
          rules={[
            {
              required: true,
              message: "请输入手机号",
            },
          ]}
        >
          <Input
            addonBefore={prefixSelector}
            style={{
              width: "100%",
            }}
          />
        </Form.Item>
          
        <Form.Item
          name="email"
          label="E-mail"
          rules={[
            {
              type: "email",
              message: "请输入正确邮箱",
            },
            {
              required: true,
              message: "请输入邮箱",
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="密码"
          rules={[
            {
              required: true,
              message: "请输入密码",
            },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>
        <Form.Item
          name="confirm"
          label="再次输入密码"
          dependencies={["password"]}
          hasFeedback
          rules={[
            {
              required: true,
              message: "请再次输入密码",
            },
            ({ getFieldValue }) => ({
              validator(_, value) {
                if (!value || getFieldValue("password") === value) {
                  return Promise.resolve();
                }

                return Promise.reject(
                  new Error("两次密码不一致")
                );
              },
            }),
          ]}
        >
          <Input.Password />
        </Form.Item>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button  htmlType="submit">
          提交
        </Button>
        {/* <Button danger onClick={back} type='link'>
            返回上一页
          </Button> */}
      </Form.Item>
    </Form>
  </Card>
  );
}
